﻿<UserControl x:Class="Microsoft.Samples.Kinect.BasicInteractions.HandVisualizer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" x:Name="HandVisualizerControl"
             xmlns:p="clr-namespace:Microsoft.Samples.Kinect.BasicInteractions.Properties"
             xmlns:local="clr-namespace:Microsoft.Samples.Kinect.BasicInteractions">
    <UserControl.Resources>
        <Storyboard x:Key="CompleteRing" FillBehavior="Stop">
            <PointAnimationUsingPath Storyboard.TargetName="TopRingArc" 
                                     Storyboard.TargetProperty="Point"
                                     Duration="{Binding Source={x:Static p:Settings.Default}, Path=SelectionTime, ConverterParameter=400, Converter={StaticResource MillisecondsToDurationConverter}}">
                <PointAnimationUsingPath.PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="50 3">
                            <ArcSegment Size="47 47" Point="50 97" SweepDirection="ClockWise" />
                            <ArcSegment Size="47 47" Point="50 3" SweepDirection="Clockwise" />
                        </PathFigure>
                    </PathGeometry>
                </PointAnimationUsingPath.PathGeometry>
            </PointAnimationUsingPath>
            <BooleanAnimationUsingKeyFrames SpeedRatio="2" Storyboard.TargetName="TopRingArc" Storyboard.TargetProperty="IsLargeArc">
                <DiscreteBooleanKeyFrame KeyTime="{Binding Source={x:Static p:Settings.Default}, Path=SelectionTime, ConverterParameter=400, Converter={StaticResource MillisecondsToKeyTimeConverter}}" 
                                         Value="True" />
            </BooleanAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="TopRing">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                <DiscreteDoubleKeyFrame
                    KeyTime="{Binding Source={x:Static p:Settings.Default}, Path=SelectionTime, ConverterParameter=10, Converter={StaticResource MillisecondsToKeyTimeConverter}}"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="{Binding Source={x:Static p:Settings.Default}, Path=SelectionTime, ConverterParameter=300, Converter={StaticResource MillisecondsToKeyTimeConverter}}"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="BottomRing">
                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="{Binding Source={x:Static p:Settings.Default}, Path=SelectionTime, ConverterParameter=0, Converter={StaticResource MillisecondsToKeyTimeConverter}}"
                    Value="1" />
                <EasingDoubleKeyFrame
                    KeyTime="{Binding Source={x:Static p:Settings.Default}, Path=SelectionTime, ConverterParameter=10, Converter={StaticResource MillisecondsToKeyTimeConverter}}"
                    Value="0" />
            </DoubleAnimationUsingKeyFrames> 
        </Storyboard>
        <Storyboard x:Key="ExpandRing" FillBehavior="Stop">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="ExpandingRing">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="0.8" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:0.51" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="ExpandingRing">
                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.71" Value="3" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="ExpandingRing">
                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.71" Value="3" />
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </UserControl.Resources>
    <Viewbox>
        <Canvas x:Name="MainCanvas" Width="{x:Static SystemParameters.PrimaryScreenWidth}" Height="{x:Static SystemParameters.PrimaryScreenHeight}">
            <Grid Canvas.Left="{Binding Path=Controller.ActiveHand.X, Source={x:Static Application.Current}}"
                  Canvas.Top="{Binding Path=Controller.ActiveHand.Y, Source={x:Static Application.Current}}">
                <Grid x:Name="HandGrid" Width="100" Height="100" Margin="-50,-50,0,0" HorizontalAlignment="Left"
                      VerticalAlignment="Top">
                    <Image Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform">
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Style.Triggers>
                                    <DataTrigger
                                        Binding="{Binding Controller.ActiveHand.IsLeft, Source={x:Static Application.Current}}" Value="false">
                                        <Setter Property="Source"
                                                Value="/BasicInteractions-WPF;component/Resources/Images/hand_r.png" />
                                    </DataTrigger>
                                    <DataTrigger
                                        Binding="{Binding Controller.ActiveHand.IsLeft, Source={x:Static Application.Current}}" Value="true">
                                        <Setter Property="Source"
                                                Value="/BasicInteractions-WPF;component/Resources/Images/hand_l.png" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                    <Path Name="ExpandingRing" Opacity="0" Stroke="{StaticResource SelectedColorBrush}" StrokeThickness="1" 
                          Fill="White" RenderTransformOrigin="0.5,0.5">
                        <Path.Data>
                            <CombinedGeometry GeometryCombineMode="Xor">
                                <CombinedGeometry.Geometry1>
                                    <EllipseGeometry RadiusX="49" RadiusY="49" Center="50,50" />
                                </CombinedGeometry.Geometry1>
                                <CombinedGeometry.Geometry2>
                                    <EllipseGeometry RadiusX="43" RadiusY="43" Center="50,50" />
                                </CombinedGeometry.Geometry2>
                            </CombinedGeometry>
                        </Path.Data>
                        <Path.RenderTransform>
                            <ScaleTransform />
                        </Path.RenderTransform>
                    </Path>
                    <Ellipse Name="BottomRing" Width="100" Height="100" Opacity="0" Stroke="White" StrokeThickness="7" />
                    <Path x:Name="TopRing" Opacity="0" Stroke="{StaticResource SelectedColorBrush}" StrokeThickness="7">
                        <Path.Data>
                            <PathGeometry>
                                <PathFigure StartPoint="50 3">
                                    <ArcSegment x:Name="TopRingArc"
                                    Size="47 47"
                                    SweepDirection="Clockwise" />
                                </PathFigure>
                            </PathGeometry>
                        </Path.Data>
                    </Path>
                </Grid>

            </Grid>
        </Canvas>
    </Viewbox>
</UserControl>